<template>
  <!-- 此页面为欢迎(即进入应用的时候显示的页面),具体实现思路为使用路由的重定向将根目录的路径指向这个页面,然后判断根据在localstroage中保存的信息,判断是显示第一次进入的时候显示的引导页面还是第一次之后显示的启动页,然后在手动或者计时结束的时候将其跳转到首页即可 -->
  <!-- 倒计时页 -->
  <div class="box"  v-if="flag">
    <div class="Timeheader">
      <div class="time">
        <span>{{ time }}</span> | <span @click="skip">跳过</span>
      </div>
    </div>
    <div class="content">
      <img src="../../lib/img/Welcome/start-up.png" alt="" style="width:100%;height:100%">
    </div>
  </div>
  <!-- 轮播引导页 -->
  <div class="box" v-else>
    <van-swipe :loop="false" :show-indicators="false">
      <van-swipe-item v-for="(image, index) in guidelist" :key="index" class="container">
        <img v-lazy="image.src" width="100%" height="100%"/>
        <!-- 当当前索引值为3的时候在图片的相应的位置显示按钮,触发点击事件跳转到首页中 -->
        <div v-if="index === 2" @click="skip" class="but"></div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload } from 'vant'
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
export default {
  // 设置data初始值
  data () {
    return {
      time: 4, // 到计时
      flag: false, // 判断是否为第一次启动本应用程序,true: 显示启动页的到计时,false: 显示引导页的图片轮播
      guidelist: [ // 记录第一次进入应用时的引导页时所需的图片路径
        { src: require('../../lib/img/Welcome/welcome01.png') },
        { src: require('../../lib/img/Welcome/welcome02.png') },
        { src: require('../../lib/img/Welcome/welcome03.png') }
      ],
      invtime: '' // 用来存放计时器
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {
    // lazypignewold: 是否第一次进入应用,false:第一次; true:非第一次
    this.flag = localStorage.getItem('lazypignewold') === 'true'
    if (this.flag) {
      this.ToTime() // 在生命周期中调用这个函数,当页面加载到这个生命周期的时候加载这个计算属性函数
    }
  },
  // 计算属性
  methods: {
    // 时间结束跳转
    ToTime () {
      this.invtime = setInterval(() => {
        // console.log(this.time)
        if (this.time > 0) {
          this.time -= 1
        } else {
          // console.log('清除计时器跳转路由')
          clearInterval(this.invtime)
          // 在跳转之前先判断一下用户是否登录(即判断一下localstroage中是登录状态手机否未true)
          if (localStorage.getItem('lazypigislogin') === 'true') {
            this.$router.replace('/home')
          } else {
            this.$router.replace('/loginAndregister')
          }
        }
      }, 1000)
    },
    // 点击启动页跳过或者点击引导页的进入应该跳转
    skip () {
      // console.log('点击跳过按钮清除计时器并跳转路由')
      clearInterval(this.invtime)
      // 当触发这个功能的时候跳转并更改localstroage中的状态,将是否为第一次进入应该由false改为true
      localStorage.setItem('lazypignewold', 'true')
      // 然后判断用户的登录状态,登录true则跳转首页,没有登录则false跳转登录注册页
      if (localStorage.getItem('lazypigislogin') === 'true') {
        this.$router.replace('/home')
      } else {
        this.$router.replace('/loginAndregister')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 样式
  .Timeheader{
    font-size: 0.2rem;
    .time{
      float: right;
      margin-right: .05rem;
    }
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .container {
    position: relative;
    // 在轮播下标为2的时候(即第三张图的时候)显示的立即体验的按钮
    .but {
      width: 1.27rem;
      height: .60rem;
      // background-color: burlywood;
      // border-radius: .34rem;
      position: absolute;
      // top: 5.3rem;
      bottom: .55rem;
      left: 1.25rem;
    }
  }
</style>
